<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易</title>
    <style>
        .top {
            height: 60px;
            width: 100%;
            border: 1px red solid;
            margin-right: 10px;
        }

        .cen {
            height: 740px;
            width: 100%;
            border: 1px red solid;
            background-image: url("素材/2.jpg");
            background-size: 100% 100%;
        }


        .top img {
            width: 190px;
            height: 60px
        }

        .top span {
            margin-left: 35px;
        }
        form{
            margin-top: 100px;
            width: 486px;
            height: auto;
            float: right;
            margin-right: 50px;
            background-color: #FFFFFF;
            text-align: center;
        }
        ul{
            float: right;
            list-style-type: none;
        }
        ul li{
            float: right;
            padding-top: 5px;
            padding-right: 30px;
            font-size:  10px;
            color: gray;
        }

    </style>
</head>
<body>
<div class="top">
    <span><img src="素材/1.jpg"></span>
    <ul>
        <li>登陆反馈</li>
        <li>帮助</li>
        <li>|</li>
        <li>官网App</li>
        <li>海外用户登陆</li>
        <li>邮箱会员</li>
        <li>VIP邮箱</li>
        <li>企业邮箱</li>
    </ul>
</div>
<div class="cen">
    <form action="#" method="get" autocapitalize="on">
        <p>注册详情</p>
        <hr>
        <div>
            <div>姓名:&nbsp;&nbsp;<input type="text" name="username" placeholder="请输入用户名"></div>
            <div>密码:&nbsp;&nbsp;<input type="password" name="password" placeholder="请输入密码"></div>
            <div>邮箱:&nbsp;&nbsp;<input type="email" name="email" placeholder="在此输入邮箱"></div>
            <div>手机:&nbsp;&nbsp;<input type="tel" name="phone" placeholder="在此输入手机号"></div>
            <hr>
        </div>
        <div>
            <div class="gender">
                性别:<input type="radio" name="gender">男
                     <input type="radio" name="gender">女
                    <input type="radio" name="gender">其他
            </div>
            <div>
                爱好: <input type="checkbox" name="ai1">音乐
                <input type="checkbox" name="ai2">电影
                <input type="checkbox" name="ai3">游戏
            </div>
            <div>
                出生日期:<input type="date">
            </div>
            <div>
                所在城市:<select>
                <option>请输入您所在城市</option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="省会城市">
                    <option>西安</option>
                    <option>杭州</option>
                    <option>郑州</option>
                    <option>武汉</option>
                </optgroup>
            </select>
            </div>
            <hr>
            <div>
                个性签名:<textarea rows="4" cols="50" placeholder="写下你的与众不同"></textarea>
                <hr>
            </div>
            <div>
                <button type="submit">注册</button>
                <button type="reset">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
</html>